<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--全宗数据-->
      <el-col :span="4" :xs="24" ref="hMain">
        <div class="head-container">
          <el-input v-model="fondsName" placeholder="请输入全宗名称" clearable prefix-icon="el-icon-search"
                    style="margin-bottom: 20px" />
        </div>
        <div class="head-container" :style="{ height: tableHeight + 'px' }">
          <el-tree :data="fondsOptions" :props="defaultProps" :expand-on-click-node="false"
                   :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
                   @node-click="handleNodeClick"  :style="isSize"/>

        </div>
      </el-col>

      <el-col :span="20" :xs="24" v-show="isShow">
        <el-row :gutter="10" class="mb8" style="display:flex;justify-content: end;">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-check" @click="submitForm"
                       v-hasPermi="['archive:yqQzjjs:add']">保存</el-button>
          </el-col>
          <!--      <el-col :span="1.5">-->
          <!--        <el-button-->
          <!--          type="success"-->
          <!--          plain-->
          <!--          icon="el-icon-edit"-->
          <!--          -->
          <!--          :disabled="single"-->
          <!--          @click="handleUpdate"-->
          <!--          v-hasPermi="['archive:yqQzjjs:edit']"-->
          <!--        >修改</el-button>-->
          <!--      </el-col>-->
          <!--      <el-col :span="1.5">-->
          <!--        <el-button-->
          <!--          type="danger"-->
          <!--          plain-->
          <!--          icon="el-icon-delete"-->
          <!--          -->
          <!--          :disabled="multiple"-->
          <!--          @click="handleDelete"-->
          <!--          v-hasPermi="['archive:yqQzjjs:remove']"-->
          <!--        >删除</el-button>-->
          <!--      </el-col>-->
          <el-col :span="1.5">
            <el-button type="warning" plain icon="el-icon-download" @click="handleExport"
                       v-hasPermi="['archive:yqQzjjs:export']">导出</el-button>
          </el-col>
          <!--                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
        </el-row>
        <div>
          <h1>一、全宗构成者沿革</h1>
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="全宗构成者名称" label-width="120px" prop="fondsComposer">
                  <el-input v-model="form.fondsComposer" placeholder="" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="全宗号" label-width="120px" prop="fondsCode">
                  <el-input v-model="form.fondsCode" placeholder="" clearable />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="性    质" label-width="120px" prop="nature">
                  <el-input v-model="form.nature" placeholder="" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="隶属关系" label-width="120px" prop="affiliation">
                  <el-input v-model="form.affiliation" placeholder="" clearable />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="主要职能" label-width="120px" prop="role">
                  <editor v-model="form.role" :min-height="400" style="width: 100%" :isMaterialList="true" :isMaterialListStyle="'2'" ref="editor1" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="主要负责人名录" label-width="120px" prop="directorList">
                  <editor v-model="form.directorList" :min-height="400" style="width: 100%" :isMaterialList="true" :isMaterialListStyle="'2'" ref="editor2"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <h2>二、机构设置</h2>
              <el-col :span="24">
                <!--                <el-form-item label="" label-width="0px" prop="organization">-->
                <editor v-model="form.organization" :min-height="400" style="width: 100%" :isMaterialList="true" :isMaterialListStyle="'2'" ref="editor3"/>
                <!--                </el-form-item>-->
              </el-col>
            </el-row>
            <h2>三、全宗档案情况简介</h2>
            <el-row>
              <h3>2.档案完整程度</h3>
              <el-col :span="24">
                <!--                <el-form-item label="" label-width="0px" prop="completeness">-->
                <editor v-model="form.completeness" :min-height="400" style="width: 100%" :isMaterialList="true" :isMaterialListStyle="'2'" ref="editor4"/>
                <!--                </el-form-item>-->
              </el-col>
            </el-row>
            <el-row>
              <h3>3.档案的利用价值及鉴定情况</h3>
              <el-col :span="24">
                <!--                <el-form-item label="" label-width="0px" prop="appraisalSituation">-->
                <editor v-model="form.appraisalSituation" :min-height="400" style="width: 100%" :isMaterialList="true" :isMaterialListStyle="'2'" ref="editor5"/>
                <!--                </el-form-item>-->
              </el-col>
            </el-row>
            <el-row>
              <h3>4.检索工具</h3>
              <el-col :span="24">
                <!--                <el-form-item label="" label-width="0px" prop="searchTool">-->
                <editor v-model="form.searchTool" :min-height="400" style="width: 100%" :isMaterialList="true" :isMaterialListStyle="'2'" ref="editor6"/>
                <!--                </el-form-item>-->
              </el-col>
            </el-row>
          </el-form>
        </div>

      </el-col>

      <el-col :span="20" :xs="24" v-show="!isShow" class="empty">
        <el-empty :image-size="200"></el-empty>
      </el-col>

    </el-row>

    <!--    <el-form :model="queryParams" ref="queryForm"  :inline="true" v-show="showSearch" label-width="68px">-->
    <!--      <el-form-item>-->
    <!--        <el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>-->
    <!--        <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>-->
    <!--      </el-form-item>-->
    <!--    </el-form>-->



    <!--    <el-table v-loading="loading" :data="yqqzjjsList" @selection-change="handleSelectionChange">-->
    <!--      <el-table-column type="selection" width="55" align="center" />-->
    <!--      <el-table-column label="ID" align="center" prop="id" />-->
    <!--      <el-table-column label="全宗ID" align="center" prop="fondsId" />-->
    <!--      <el-table-column label="全宗构成者名称" align="center" prop="fondsComposer" />-->
    <!--      <el-table-column label="性质" align="center" prop="nature" />-->
    <!--      <el-table-column label="隶属关系" align="center" prop="affiliation" />-->
    <!--      <el-table-column label="立档单位代码" align="center" prop="tenantCode" />-->
    <!--      <el-table-column label="创建人ID" align="center" prop="creatorId" />-->
    <!--      <el-table-column label="创建时间" align="center" prop="createTime" />-->
    <!--      <el-table-column label="最后修改人" align="center" prop="lastupdater" />-->
    <!--      <el-table-column label="最后修改时间" align="center" prop="lastupdateTime" />-->
    <!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
    <!--        <template slot-scope="scope">-->
    <!--          <el-button-->
    <!--            -->
    <!--            type="text"-->
    <!--            icon="el-icon-edit"-->
    <!--            @click="handleUpdate(scope.row)"-->
    <!--            v-hasPermi="['archive:yqQzjjs:edit']"-->
    <!--          >修改</el-button>-->
    <!--          <el-button-->
    <!--            -->
    <!--            type="text"-->
    <!--            icon="el-icon-delete"-->
    <!--            @click="handleDelete(scope.row)"-->
    <!--            v-hasPermi="['archive:yqQzjjs:remove']"-->
    <!--          >删除</el-button>-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--    </el-table>-->



    <!--    <pagination-->
    <!--      v-show="total>0"-->
    <!--      :total="total"-->
    <!--      :page.sync="queryParams.pageNum"-->
    <!--      :limit.sync="queryParams.pageSize"-->
    <!--      @pagination="getList"-->
    <!--    />-->

    <!-- 添加或修改全宗卷介绍对话框 -->
    <!--    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>-->
    <!--      一、全宗构成者沿革-->
    <!--      <el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
    <!--        <el-row>-->
    <!--          <el-col :span="12" style="width: 50%;">-->
    <!--            <el-form-item label="全宗构成者名称" prop="fondsComposer">-->
    <!--              <el-input v-model="form.fondsComposer" placeholder="" clearable />-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--          <el-col :span="12" style="width: 50%;">-->
    <!--            <el-form-item label="全宗号" prop="fondsCode">-->
    <!--              <el-input v-model="form.fondsCode" placeholder="" clearable />-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--        </el-row>-->
    <!--        <el-row>-->
    <!--          <el-col :span="12" style="width: 50%;">-->
    <!--            <el-form-item label="性    质" prop="nature">-->
    <!--              <el-input v-model="form.nature" placeholder="" clearable />-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--          <el-col :span="12" style="width: 50%;">-->
    <!--            <el-form-item label="隶属关系" prop="affiliation">-->
    <!--              <el-input v-model="form.affiliation" placeholder="" clearable />-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--        </el-row>-->
    <!--        <el-row>-->
    <!--          <el-col :span="12" style="width: 100%;">-->
    <!--            <el-form-item label="主要职能" prop="role">-->
    <!--&lt;!&ndash;              <editor v-model="form.role" :min-height="677" style="width: 100%" />&ndash;&gt;-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--        </el-row>-->
    <!--        <el-row>-->
    <!--          <el-col :span="12" style="width: 100%;">-->
    <!--            <el-form-item label="主要负责人名录" prop="directorList">-->
    <!--              <editor v-model="form.directorList" :min-height="677" style="width: 100%" />-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--        </el-row>-->
    <!--        <el-row>-->
    <!--          <el-col :span="12" style="width: 100%;">-->
    <!--            <el-form-item label="机构设置" prop="organization">-->
    <!--              <editor v-model="form.organization" :min-height="677" style="width: 100%" />-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--        </el-row>-->
    <!--        <el-row>-->
    <!--          <el-col :span="12" style="width: 100%;">-->
    <!--            <el-form-item label="档案完整程度" prop="completeness">-->
    <!--              <editor v-model="form.completeness" :min-height="677" style="width: 100%" />-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--        </el-row>-->
    <!--        <el-row>-->
    <!--          <el-col :span="12" style="width: 100%;">-->
    <!--            <el-form-item label="档案的利用价值及鉴定情况" prop="appraisalSituation">-->
    <!--              <editor v-model="form.appraisalSituation" :min-height="677" style="width: 100%" />-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--        </el-row>-->
    <!--        <el-row>-->
    <!--          <el-col :span="12" style="width: 100%;">-->
    <!--            <el-form-item label="检索工具" prop="searchTool">-->
    <!--              <editor v-model="form.searchTool" :min-height="677" style="width: 100%" />-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--        </el-row>-->
    <!--      </el-form>-->
    <!--      <div slot="footer" class="dialog-footer">-->
    <!--        <el-button type="primary" @click="submitForm">确 定</el-button>-->
    <!--        <el-button @click="cancel">取 消</el-button>-->
    <!--      </div>-->
    <!--    </el-dialog>-->
  </div>
</template>

<script>
import { listYqqzjjs, getYqqzjjs, delYqqzjjs, addYqqzjjs, updateYqqzjjs, treeFONDS } from "@/api/archive/quanzongjuanguanli/yqqzjjs";
import estimateTableHeight from '@/mixins/estimateTableHeight'
import Treeselect from "@riophae/vue-treeselect";
import { listFONDS } from "@/api/archive/application/generalManager";
import fileTrees from "@/components/fileTrees/index.vue";

export default {
  // mounted() {
  //   // 刚开始时，不聚焦
  //   this.$refs.myQuillEditor.quill.disable();
  //
  //   setTimeout(() => {
  //     // 2秒之后可以点击（聚焦）
  //     this.$refs.myQuillEditor.quill.enable();
  //   }, 2000);
  // },
  name: "Yqqzjjs",
  mixins: [estimateTableHeight], // 混入方法
  components: { fileTrees, Treeselect },
  data() {
    return {
      isSubmitting:false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 全宗卷介绍表格数据
      yqqzjjsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      fondsName: undefined,
      fondsOptions: undefined,
      fondsCode: null,
      fondsId: null,
      // 查询参数
      // queryParams: {
      //   pageNum: 1,
      //   pageSize: 10,
      //   fondsId: null,
      //   fondsComposer: null,
      //   nature: null,
      //   affiliation: null,
      //   tenantCode: null,
      //   creatorId: null,
      //   createTime: null,
      //   lastupdater: null,
      //   lastupdateTime: null,
      //   role: null,
      //   directorList: null,
      //   organization: null,
      //   completeness: null,
      //   appraisalSituation: null,
      //   searchTool: null
      // },
      // 表单参数
      form: {
      },
      encodeForm:{},
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 表单校验
      rules: {
      },
      isShow: false, //是否显示右侧数据
      isnoClick: true
    };
  },
  watch: {
    // 根据名称筛选部门树
    fondsName(val) {
      this.$refs.tree.filter(val);
    },
  },
  computed: {
    isSize() {
      if (this.$store.getters.size == 'small') {
        this.size = 'font-size: 12px;'
      } else {
        this.size = 'font-size: 14px;'
      }
      return this.size
    }
  },
  created() {
    // this.getList();
    this.getFondsTree();
  },
  methods: {
    /** 查询全宗卷介绍列表 */
    getList() {
      this.loading = true;
      listYqqzjjs(this.queryParams).then(response => {
        this.yqqzjjsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询全宗下拉树结构 */
    getFondsTree() {
      treeFONDS().then(response => {
        this.fondsOptions = response.data;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      if (this.isnoClick) {
        this.isnoClick = false
        this.fondsId = data.id;
        this.form = {}
        this.encodeForm = {}
        this.form.fondsId = this.fondsId;
        if (data.id == '0') {
          this.isShow = false;
        } else {
          this.isShow = true;
        }
        this.fondsCode = data.fondsCode;
        getYqqzjjs(this.fondsId).then(response => {
          console.log(response)
          if (response.data != null) {
            this.form = response.data;
            // this.form["role"]=response.data.role;

            //富文本编辑器神坑处理
            this.$nextTick(function() {
              let inputDom=document.querySelectorAll('.el-input__inner')[0];
              inputDom.focus();
            });
          } else {
            this.form = {};
            //富文本编辑器神坑处理
            this.$nextTick(function() {
              let inputDom=document.querySelectorAll('.el-input__inner')[0];
              inputDom.focus();
            });
          }
          this.form.fondsCode = data.fondsCode;
          this.isnoClick = true
        });
      } else {
        this.$message({ message: '重复点击，请稍后再试!', type: 'warning' })
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        fondsId: null,
        fondsCode: null,
        fondsComposer: null,
        nature: null,
        affiliation: null,
        tenantCode: null,
        creatorId: null,
        createTime: null,
        lastupdater: null,
        lastupdateTime: null,
        role: null,
        directorList: null,
        organization: null,
        completeness: null,
        appraisalSituation: null,
        searchTool: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加全宗卷介绍";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getYqqzjjs(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改全宗卷介绍";
      });
    },
    /** 提交按钮 */
    // async submitForm() {
    //   if (this.isSubmitting) return; // 如果正在提交，则不重复提交
    //   this.isSubmitting = true; // 开始提交，设置标志位为 true
    //   try {
    //     if (this.$refs["form"].validate()) {
    //       if (this.form.id != null) {
    //         await updateYqqzjjs(this.form).then(response => {
    //           this.$modal.msgSuccess("修改成功！");
    //           this.open = false;
    //           this.getList();
    //         });
    //       } else {
    //         this.form.fondsId = this.fondsId;
    //         await addYqqzjjs(this.form).then(response => {
    //           this.$modal.msgSuccess("保存成功！");
    //           this.open = false;
    //           this.getList();
    //         });
    //         getYqqzjjs(this.fondsId).then(response => {
    //           console.log(response)
    //           if (response.data != null) {
    //             this.form.id = response.data.id;
    //           } else {
    //             this.form = {};
    //           }
    //           // this.form.fondsCode = data.fondsCode;
    //         });
    //       }
    //     }
    //   } catch (error) {
    //     // this.$modal.msgSuccess("操作失败！");
    //   } finally {
    //     this.isSubmitting = false; // 无论成功还是失败，都设置标志位为 false
    //   }
    // },
    submitForm(val) {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // this.encodeForm.id = this.form.id;
          // this.encodeForm.fondsComposer = this.form.fondsComposer;
          // this.encodeForm.fondsCode = this.form.fondsCode;
          // this.encodeForm.nature = this.form.nature;
          // this.encodeForm.affiliation = this.form.affiliation;
          // this.encodeForm.tenantCode = this.form.tenantCode;
          // this.encodeForm.role = encodeURIComponent(this.form.role);
          // this.encodeForm.directorList = encodeURIComponent(this.form.directorList);
          // this.encodeForm.organization = encodeURIComponent(this.form.organization);
          // this.encodeForm.completeness = encodeURIComponent(this.form.completeness);
          // this.encodeForm.appraisalSituation = encodeURIComponent(this.form.appraisalSituation);
          // this.encodeForm.searchTool = encodeURIComponent(this.form.searchTool);
          // console.log("0000000000000000000000000000000")
          for (let key in this.form) {
            if (this.form.hasOwnProperty(key) && this.form[key] !== null) {
              if (this.form[key]=='role'||this.form[key]=='directorList'||this.form[key]=='organization'||this.form[key]=='completeness'||this.form[key]=='appraisalSituation'||this.form[key]=='searchTool'){
                this.encodeForm[key] = encodeURIComponent(this.form[key]);
              }else {
                this.encodeForm[key] = this.form[key];
              }
            }
          }
          if (this.encodeForm.id != null) {
            console.log(this.encodeForm,this.form)
            updateYqqzjjs(this.encodeForm).then(response => {
              if (val == '导出') {
                this.$modal.msgSuccess("导出成功！");
              } else {
                this.$modal.msgSuccess("修改成功！");
              }
              this.open = false;
              this.getList();
            });
          } else {
            this.form.fondsId = this.fondsId;
            this.encodeForm.fondsId = this.fondsId;
            addYqqzjjs(this.encodeForm).then(response => {
              if (val == '导出') {
                this.$modal.msgSuccess("导出成功！");
              } else {
                this.$modal.msgSuccess("保存成功！");
              }
              this.open = false;
              this.getList();
              getYqqzjjs(this.fondsId).then(response => {
                console.log(response)
                if (response.data != null) {
                  this.form.id = response.data.id;
                } else {
                  this.form = {};
                }
                // this.form.fondsCode = data.fondsCode;
              });
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除全宗卷介绍编号为"' + ids + '"的数据项？').then(function () {
        return delYqqzjjs(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.submitForm('导出');
      // if (this.form.id== null){
      //   this.$modal.msgWarning('请先进行保存！')
      // }else {
      //   this.queryParams.id = this.form.id;
      //   this.queryParams.fondsCode = this.form.fondsCode;
      this.form.fondsId = this.fondsId;
      this.fondsCode = this.form.fondsCode;
      this.download('archive/yqQzjjs/export', {
        ...this.form
      }, `yqqzjjs_${new Date().getTime()}.docx`)
      // getYqqzjjs(this.fondsId).then(response => {
      //   console.log(response)
      //   if (response.data != null) {
      //     this.form = response.data;
      //   } else {
      //     this.form = {};
      //   }
      //   this.form.fondsCode = this.fondsCode;
      // });
      // }
    }
  }
};
// window.onload = function() {
//   window.scrollTo(0, document.body.scrollTop || document.documentElement.scrollTop);
// };
</script>
